<style lang="scss" scoped>
    .mshop-number {
        $borderStyle: 1px solid #d0d0d0;

        display: flex;
        border: $borderStyle;
        border-radius: 4px;
        text-align: center;

        span, input {
            display: inline-block;
        }

        .value {
            background-color: inherit;
            border: none;
            width: 2em;
            text-align: center;
        }

        $operatorPadding: 0 .75em;

        .minus {
            padding: $operatorPadding;
            border-right: $borderStyle;
        }

        .plus {
            padding: $operatorPadding;
            border-left: $borderStyle;
        }

        .disable {
            $disableColor: #d0d0d0;
            background-color: $disableColor;
            border-color: $disableColor;
            color: white;
        }
    }
</style>

<template>
    <div class="mshop-number">
        <span class="minus" :class="{disable: value <= min}" @click="minus">-</span>
        <input type="number" v-model="value" class="value" />
        <span class="plus" @click="plus">+</span>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                require: true
            },
            min: {
                default: 1
            }
        },
        methods:  {
            minus () {
                if (parseInt(this.value) > parseInt(this.min)) {
                    this.value = parseInt(this.value) - 1;
                }
            },

            plus () {
                this.value = parseInt(this.value) + 1;
            },
        },
        watch: {
            value (value) {
                const temp = parseInt(value);

                if (isNaN(temp) || temp < this.min) {
                    this.value = this.min;
                }

                this.$dispatch('update-qty');
            }
        }
    }
</script>
